<template>
	<view class="commit-content">
		<swiper style="height: 100%;" :interval="interval"  :swipeable="false" :autoplay="true" :circular="true" vertical :indicator-dots="false"
			:previous-margin="'0px'" :next-margin="'0px'" :current="currentIndex" @change="handleChange">
			<swiper-item @touchmove.stop v-for="(page, index) in paginatedComments" :key="index">
				<view class="comment-list">
				          <view v-for="item in page" :key="item.id" class="commit-item">
				            	<view class="commit-item-top">
				            		<view class="item-top-left">
				            			<view class="user-info">
				            				<image :src="item.avatar" mode=""></image>
				            				<view class="user-name">
				            					<view class="name-text">
				            						{{item.userName}}
				            					</view>
				            				</view>
				            			</view>
				            			<view class="commit-content-text">
				            				{{item.content}}
				            			</view>
				            		</view>
				            		<image v-if="item.form == 'card'" @click="handleOpenCardSingle(item.objectId)" class="card-image" :src="item.cardImage" mode=""></image>
				            	</view>
				            	<view class="commit-origin" v-if="item.form == 'group'" @click="handleOpenGroupDetail(item.objectId,item.groupName)">
				            		<view class="origin-text">
				            			评论来自卡组
				            		</view>
				            		<image class="orgin-avatar" :src="item.groupImage" mode=""></image>
				            		<view class="origin-title">
				            			{{item.groupName}}
				            		</view>
				            	</view>
				            	<view class="view-info">
				            		<view class="view-count">
				            			{{item.createtime}}
				            		</view>
				            		<view class="zan-count">
				            			<image @click="handleClickZan(item, false)" v-if="item.isZan" class="title-icon"
				            				src="https://static-tool.77.top/static/zan.png" alt="" />
				            			<image @click="handleClickZan(item, true)" v-else class="title-icon"
				            				src="https://static-tool.77.top/static/zan-not.png" alt="" />
				            			<text class="title-text">{{item.zan}}点赞</text>
				            		</view>
				            	</view>
				          </view>
				        </view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from 'vue';
	const props = defineProps({
		commitList: {
			type: Array,
			default: []
		}
	})
	const emits = defineEmits(['initData'])
	const interval = 5000; // 自动切换间隔时间

	// 计算每页的评论列表
	const paginatedComments = computed(() => {
		const perPage = 3;
		const result = [];
		for (let i = 0; i < props.commitList.length; i += perPage) {
			result.push(props.commitList.slice(i, i + perPage));
		}
		return result;
	});
	
	// 轮播切换事件
	function handleChange(event) {
	  currentIndex.value = event.detail.current;
	  if (currentIndex.value === paginatedComments.value.length - 1) {
	    // loadComments(); // 加载下一页数据
		emits('initData')
	  }
	}

	const currentIndex = ref(0);

	const handleClickZan = (item, flag) => {
		item.isZan = flag
	}
	// 跳转到卡牌详情
	const handleOpenCardSingle = (id) => {
		uni.navigateTo({
			url:`/homePackages/card-detail-sigle?id=${id}`
		})
	}
	// 跳转到卡组
	const handleOpenGroupDetail = (id,name) => {
		uni.navigateTo({
			url:`/homePackages/cardGroupDetail?id=${id}&name=${name}`
		})
	}
</script>

<style scoped lang="scss">
	.commit-content {
		margin-top: 24rpx;
		height: 800rpx;
		.commit-item {
			margin-top: 32rpx;

			.card-image {
				width: 85rpx;
				height: 120rpx;
				margin-left: 22rpx;
				border-radius: 8rpx;
			}

			.commit-item-top {
				display: flex;
				align-items: flex-end;

				.item-top-left {
					flex: 1;
				}
			}

			.user-info {
				display: flex;

				image {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
				}

				.user-name {
					margin-left: 8rpx;

					.name-text {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 24rpx;
						color: #2E3033;
					}

					.create-time {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 22rpx;
						color: #7B7D80;
						margin-top: 12rpx;
					}
				}
			}

			.commit-content-text {
				margin-top: 14rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #47494D;
				line-height: 40rpx;
				text-align: left;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
			}

			.commit-origin {
				display: flex;
				align-items: center;
				height: 56rpx;
				background: #F7F8FA;
				border-radius: 16rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #2E3033;
				text-align: left;
				padding: 16rpx;
				box-sizing: border-box;
				margin-top: 14px;

				.orgin-avatar {
					width: 32rpx;
					height: 32rpx;
					border-radius: 8rpx;
					margin-right: 8rpx;
				}

				.origin-text {
					&::after {
						display: inline-block;
						content: '';
						width: 1rpx;
						height: 16rpx;
						background-color: #AEB0B3;
						margin: 0 8rpx;
					}

				}

				.origin-title {
					flex: 1;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}

			.view-info {
				margin-top: 8rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				image {
					width: 48rpx;
					height: 48rpx;
				}

				.view-count {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #7B7D80;

				}

				.zan-count {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #47494D;
					line-height: 23rpx;
					display: flex;
					align-items: center;
				}
			}
		}
	}
</style>